
<template>
  <div class="item" style="height: 100% ; width: 100%">
    <div id="myEcharts" :style="{ width: '100%', height: '100%' ,}"></div>
  </div>
</template>

<script>
import request from "@/util/request.js";
import * as echarts from "echarts";
export default {
  name: "Pie",
  // components: {Pie,EDigitalFlop, Map_1, EFullScreenContainer},
  data(){
    return{
      chartInstance: null,
      echart:echarts,
      title : '总量',
      allAwardCount: 1,
      awardData: [],
      option:{}
    }
  },
  mounted() {
    this.getAwardData()
    this.initChart();
    this.getData();
  },
  watch: {
    data() {
      this.getData();
    }
  },
  methods:{
    getAwardData(){
      // this.allAwardCount=123
      console.log("获取奖数据")
      request.get("/info_award/count").then(res=>{
        this.awardData.push(...res.data.data)
        this.allAwardCount=parseInt(res.data.message)
        this.updateData();
      })
    },
    initChart() {
      console.log("initChart")
      this.chartInstance = this.echart.init(document.getElementById("myEcharts"),);
    },
    async getData() {
      console.log("getData")
      await this.updateData();
    },

    updateData(){
      this.option={
        tooltip: {
          trigger: 'item'
        },
        title:{
          total: 0,
          text: '{name|' + this.title + '}\n{val|' +  this.allAwardCount  + '}',
          top: 'center',
          left: 'center',
          textStyle: {
            rich: {
              name: {
                fontSize: 14,
                fontWeight: 'normal',
                color: '#666666',
                padding: [10, 0]
              },
              val: {
                fontSize: 32,
                fontWeight: 'bold',
                color: '#333333',
              }
            }
          }
        },
        legend: {
          top: '0%',
          left: 'top'
        },
        grid:{ // 让图表占满容器
          top:"50px",
          left:"5px",
          right:"5px",
          bottom:"50px",
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'top'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: this.awardData
          }
        ]
      };
      this.chartInstance.setOption(this.option,true)
    },

  },
};


</script>

<style scoped>

</style>